<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .button {
      box-sizing: border-box;
      padding: 0 10px;
      height: 22px;
      line-height: 20px;
      display: inline-block;
      margin: 0 10px;
      font-size: 12px;
      border: 1px solid #000;
      border-radius: 2px;
      cursor: pointer;
    }

    .round {
      border-radius: 11px;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>button组件开发</h1>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success" :round="true">Success</el-button>
    <el-button type="info" :round="true">Info</el-button>
    <el-button type="warning" size="small">Warning</el-button>
    <el-button type="danger" size="large" @abc="fn">Danger</el-button>
  </div>

  <script src="../Vue.js"></script>

  <script>
    const { createApp } = Vue;
    
    // 参考文档: https://element-plus.org/en-US/component/button
    // 自己封装el-button组件
    // const sizeObj = {
    //   large: 26,
    //   default: 22,
    //   small: 18
    // }

    const ElButton = {
      props: {
        type: {
          type: String,
          validator(value) {
            return ["primary", "success", "info", "warning", "danger"].includes(value)
          }
        },
        round: {
          type: Boolean,
          default: false
        },
        size: {
          type: String,
          default: "default",
          validator(value) {
            return ["large", "default", "small"].includes(value)
          }
        }
      },
      emits: ["abc"],
      data() {
        return {
          sizeObj: {
            large: [26, 24, 14],
            default: [22, 20, 10],
            small: [18, 16, 6]
          },
          typeObj: {
            primary: "#409EFF",
            success: "#67C23A",
            info: "#909399",
            warning: "#E6A23C",
            danger: "#F56C6C"
          }
        }
      },
      template: `
        <div class="button" 
          :class="{round: round}" 
          :style="{height: sizeObj[size][0] + 'px', lineHeight: sizeObj[size][1] + 'px', paddingLeft: sizeObj[size][2] + 'px', paddingRight: sizeObj[size][2] + 'px',backgroundColor: typeObj[type], borderColor: typeObj[type], color: type ? '#fff': '#000'}"
          @click="$emit('abc')"
        >
          <slot></slot>
        </div>
      `
    }

    
    const app = createApp({
      data() {
        return {}
      },
      components: {
        ElButton
      },
      methods: {
        fn() {
          console.log("fn");
        }
      }
    })

    app.mount("#app")
  </script>
</body>
</html>